<template>
  <el-form :model="form" label-width="auto">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="项目：">
          <el-select v-model="form.region" placeholder="请选择项目">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="案件编号牌：">
          <el-input v-model="form.name" placeholder="请输入案件编号牌" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="案件名称：">
          <el-input v-model="form.name" placeholder="请输入案件名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="被取保人姓名：">
          <el-input v-model="form.name" placeholder="请输入被取保人姓名" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="被取保人身份证号：">
          <el-input v-model="form.name" placeholder="请输入被取保人身份证号" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="保证金金额：">
          <el-input v-model="form.name" placeholder="请输入保证金金额" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="起算日期：">
          <el-date-picker
            v-model="form.date1"
            type="date"
            placeholder="请选择起算日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="解除日期：">
          <el-date-picker
            v-model="form.date1"
            type="date"
            placeholder="请选择解除日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="办案单位：">
          <el-select v-model="form.region" placeholder="请选择办案单位">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="办案人姓名：">
          <el-input v-model="form.name" placeholder="请输入办案人姓名" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="办案人手机号码：">
          <el-input v-model="form.name" placeholder="请输入办案人手机号码" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="取保候审决定书：">
          <file-upload
            :disabled="false"
            :accept="'.xls'"
            :limit="3"
            @update:file-list="handleUpdateFileList"
            @success="handleSuccess"
            @error="handleError"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="收取保证金通知书：">
          <file-upload
            :disabled="false"
            :accept="'.doc'"
            :limit="5"
            @update:file-list="handleUpdateFileList"
            @success="handleSuccess"
            @error="handleError"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <div class="dialog-footer" style="text-align: center">
      <el-button @click="warningVisible = false">取消</el-button>
      <el-button type="primary" @click="warningVisible = false">
        保存
      </el-button>
    </div>
  </el-form>
</template>
<script lang="ts" setup>
import { ref,reactive } from "vue";

// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const onSubmit = () => {
  console.log("submit!");
};

const handleUpdateFileList = (newList) => {
  console.log('Updated file list:', newList);
};

const handleSuccess = (response, file, fileList) => {
  console.log('Upload successful:', response);
};

const handleError = (err, file, fileList) => {
  console.log('Upload error:', err);
};
</script>
  
<style scoped lang="scss">
::v-deep .el-select__wrapper {
  height: 40px;
  box-shadow: 0 0 0 1px #999 inset;
  border-radius: 8px;
}
::v-deep .is-focused {
  box-shadow: 0 0 0 1px #1c55d1 inset !important;
}
::v-deep .el-input__wrapper {
  height: 40px;
  box-shadow: 0 0 0 1px #999 inset;
  border-radius: 8px;
}
::v-deep .is-focus {
  box-shadow: 0 0 0 1px #1c55d1 inset !important;
}
::v-deep .el-form-item__label {
  font-size: 14px;
  font-weight: bold;
  color: #3d3d3d;
  height: 40px;
  line-height: 40px;
}

</style>
  